<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Untitled Document</title>
    <link rel="stylesheet" type="text/css" href="../style/css.css" />
    <script type="text/javascript">
        window.onload = function(){
            //例1 查找bj节点  id
           var btn01=document.getElementById("btn01");//为id为btn01 绑定一个单击响应函数
                btn01.onclick=function () {
                var bj=document.getElementById("bj");
                alert(bj.innerHTML);//innerHTML通过这个属性可以获取到元素内部的HTML代码
                };
            //例2 查找所有li的节点 li是标签名用
            // getElementsByTagName()可以根据标签名来获取一组元素节点对象
            //这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中
            //即使查询到1个 也会封装到数组中
            var btn02=document.getElementById("btn02");
                btn02.onclick=function () {
                 var lis=document.getElementsByTagName("li");
                 //遍历lis 即所有的输出lis
                    for (var i=0;i<lis.length;i++)
                    alert(lis[i].innerHTML);
                };
                //例3 查找name=gender的所有节点 通过name属性获取一组元素节点对象
                //innerHTML通过这个属性可以获取到元素内部的HTML代码
                // 对于自结标签 如input 这个属性没有 意义 比如input属性
            var btn03=document.getElementById("btn03");
                btn03.onclick=function () {
                    var inputs=document.getElementsByName("gender");
                    for (var i=0;i<inputs.length;i++){
                        alert(inputs[i].value);
                    }
                };
            //例4 查找#city下所有li节点
            //为id为btn04按钮绑定一个单击响应函数
            var btn04=document.getElementById("btn04");
                btn04.onclick=function () {
                var city=document.getElementById("city");//获取id为city的节点
                var lis=city.getElementsByTagName("li");//查找#city下所有li节点
                 for (var i=0;i<lis.length;i++){
                        alert(lis[i].innerHTML); //遍历lis
                    }
                }
            //举例5 返回#city的所有子节点
            var btn05=document.getElementById("btn05");
            btn05.onclick=function () {
            var city=document.getElementById("city");
             // var cdn=city.childNodes;
             //    alert(cdn.length);//返回值是9
             //    for(var i=0;i<cdn.length;i++){
             //        alert(cdn[i]) //遍历一下cdn 打印出来所有的子节点 发现里面空格和元素文本都算进去了
             //    }
                //children 属性可以获取当前元素的子元素
               var cdn1=city.children;
                alert(cdn1.length);//返回4 共有4个li 推荐用children
            /*childNodes
            *属性 表示当前节点的所有子节点
            * 会获取包括文本节点在内的所有节点，根据DOM标签标签间的空白也会当成文本节点，注意在IE8及以下的浏览器中，
            *不会将空白文本当成子节点，所以该属性在IE8中会返回4个子元素，而其他浏览器是9个*/
            };
            //举例6 返回#phone的第一个子节点
            var btn06=document.getElementById("btn06");//获取id为btn06的元素节点
                btn06.onclick=function () {//为id为btn06设一个单击响应函数
                    var phone=document.getElementById("phone");
                     var fir=  phone.firstChild;
                     alert(fir.innerHTML);
                     //firstElementChild不支持IE8以下的版本，如果需要兼容，尽量避免使用
                     // var fec=phone.firstElementChild;
                     // alert(fec);
            };
            //举例7 返回#bj的父节点
            var btn07=document.getElementById("btn07");
                btn07.onclick=function () {
                    var bj=document.getElementById("bj");
               var bjp = bj.parentNode;
               alert(bjp.innerText);//输出#bj父节点的文本内容
                };
            //举例8 返回#android的前一个兄弟节点
             var btn08=document.getElementById("btn08");
                btn08.onclick=function () {
                   var and=document.getElementById("android");
                  var adp= and.previousSibling;
                  alert(adp.innerText);
                };
            //举例9 读取#username的value属性值
            var btn09=document.getElementById("btn09");
                btn09.onclick=function () {
                var usn=document.getElementById("username");
                alert(usn.value);
                };
            //举例10 设置#username的value属性值
            var btn10=document.getElementById("btn10");
            btn10.onclick=function () {
              var  usn=document.getElementById("username");
              usn.value="今天风很大，你出去吗";
              alert(usn.value);
            };
            //返回#bj的文本值
            var btn11=document.getElementById("btn11");
            btn11.onclick=function () {
                var bj=document.getElementById("bj");
                alert(bj.innerHTML);
            };
        };
</script>
</head>
<body>
<script>
    /*innerHTML通过这个属性可以获取到元素内部的HTML代码
    *对于自结标签 如input 这个属性没有 意义
    *  如果需要读取元素的节点属性.直接用元素.属性名 例如：元素.id  元素.name 元素.value
    * 但是class不行 是JS的保留字 可以用元素.className
    *一.获取元素节点 通过document对象调用
    *   1.getElementById()         通过id属性获取一个元素节点对象
    *   2.getElementsByTagName()   通过标签名获取一组元素节点对象
    *                              这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中
    *   3.getElementsByName()     通过name属性获取一组元素节点对象
    *
    *二.获取元素节点的子节点
    *   通过具体的元素节点调用
    *   1.getElementsByTagName()
    *      --方法 返回当前节点的指定标签名后代节点
    *   2.childNodes
    *     --属性 表示当前节点的所有子节点
    *        会获取包括文本节点在内的所有节点，根据DOM标签标签间的空白也会当成文本节点，注意在IE8及以下的浏览器中，
    *        不会将空白文本当成子节点，所以该属性在IE8中会返回4个子元素，而其他浏览器是9个
    *   3.children 属性可以获取当前元素的子元素
    *   4.firstChild
    *     --属性 表示当前节点的第一个子节点
    *       firstElementChild不支持IE8以下的版本，如果需要兼容，尽量避免使用
    *  5.lastChild
    *          --属性 表示当前节点的最后一个子节点
    *三.获取父节点和兄弟节点
    *   通过具体的节点调用
    *   1.parentNode
    *       -属性  表示当前节点的父节点
    *   2.previousSibling
    *       -属性 当前节点的前一个兄弟节点
    *  3.nextSibling
    *    -属性 表示当前节点的后一个兄弟节点
    *
    *
    */
</script>
<div id="total">
    <div class="inner">
        <p>
            你喜欢哪个城市?
        </p>

        <ul id="city">
            <li id="bj">北京</li>
            <li>上海</li>
            <li>东京</li>
            <li>首尔</li>
        </ul>

        <br>
        <br>

        <p>
            你喜欢哪款单机游戏?
        </p>

        <ul id="game">
            <li id="rl">红警</li>
            <li>实况</li>
            <li>极品飞车</li>
            <li>魔兽</li>
        </ul>

        <br />
        <br />

        <p>
            你手机的操作系统是?
        </p>

        <ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li>
        </ul>
    </div>

    <div class="inner">
        gender:
        <input class="hello" type="radio" name="gender" value="male"/>
        Male
        <input class="hello" type="radio" name="gender" value="female"/>
        Female
        <br>
        <br>
        name:
        <input type="text" name="name" id="username" value="abcde"/>
    </div>
</div>
<div id="btnList">
    <div><button id="btn01">查找#bj节点</button></div>
    <div><button id="btn02">查找所有li节点</button></div>
    <div><button id="btn03">查找name=gender的所有节点</button></div>
    <div><button id="btn04">查找#city下所有li节点</button></div>
    <div><button id="btn05">返回#city的所有子节点</button></div>
    <div><button id="btn06">返回#phone的第一个子节点</button></div>
    <div><button id="btn07">返回#bj的父节点</button></div>
    <div><button id="btn08">返回#android的前一个兄弟节点</button></div>
    <div><button id="btn09">返回#username的value属性值</button></div>
    <div><button id="btn10">设置#username的value属性值</button></div>
    <div><button id="btn11">返回#bj的文本值</button></div>
</div>
</body>
</html>
